import React from 'react';
import MainLayout from './pages/MainLayout'
// import {
//   BrowserRouter as Router,
//   Switch,
//   Route,
//   Link
// } from "react-router-dom";
// import './App.css';
// import ClassCounter from './components/ClassCounter';
// import HookCounter from './components/HookCounter';
// // import HookCounterContext from './components/HookCounter/context';
// import {Color} from './components/HookCounter/colorContext'
// import HookButtons from './components/HookButtons';

function App() {
  // const params = {
  //   name:'mic',
  //   age:22,
  //   content:'hello'
  // }

  return (
    <MainLayout />
    // <Router>
    //   <div>
    //       <nav>
    //         <ul>
    //           <li>
    //             <Link to="/">HookCounter</Link>
    //           </li>
    //           <li>
    //             <Link to="/old">ClassCounter</Link>
    //           </li>
    //         </ul>
    //       </nav>

    //               {/* A <Switch> looks through its children <Route>s and
    //         renders the first one that matches the current URL. */}
    //     <Switch>
    //       <Route path="/old">
    //         <ClassCounter />
    //       </Route>
    //       <Route path="/">
    //         <Color>
    //           <HookCounter />
    //           <HookButtons />
    //         </Color>
    //         {/* <HookCounterContext.Provider value={{...params}}>
    //           <HookCounter />
    //         </HookCounterContext.Provider> */}
    //       </Route>
    //     </Switch>
    //   </div>
    // </Router>

  );
}

export default App;
